<template>
  <div class="demo-content">
    <h1>Fabric 事件类型</h1>
    <section class="demo-text">
      <h2>关于事件</h2>
      <p>Fabric 对浏览器事件进行了封装，使用了更为简洁的绑定和解绑方式，在此基础上又延伸出了绘图元素的事件，满足绘制使用的基本需要</p>
      <h2>观察者事件列表</h2>
      <el-tag
  v-for="(tag,index) in list"
  :key="index">
  {{tag}}
</el-tag>
<h2>元素对象事件</h2>
      <el-tag
  v-for="(tag,index) in objlist"
  :key="'o'+index">
  {{tag}}
</el-tag>
<p style="text-align:right;padding-right:60px">@王睿杰 2019.1.18</p>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        "object:modified",
        "object:moving",
        "object:scaling",
        "object:rotating",
        "object:skewing",
        "object:moved",
        "object:scaled",
        "object:rotated",
        "object:skewed",
        "before:transform",
        "before:selection:cleared",
        "selection:cleared",
        "selection:created",
        "selection:updated",
        "mouse:up",
        "mouse:down",
        "mouse:move",
        "mouse:up:before",
        "mouse:down:before",
        "mouse:move:before",
        "mouse:dblclick",
        "mouse:wheel",
        "mouse:over",
        "mouse:out",
        "drop",
        "dragover",
        "dragenter",
        "dragleave",
        "after:render",
        '"path:created"',
        '"object:added"',
        '"object:removed"'
      ],
      objlist: [
        "moving",
        "scaling",
        "rotating",
        "skewing",
        "moved",
        "scaled",
        "rotated",
        "skewed",
        "mouseup",
        "mousedown",
        "mousemove",
        "mouseup:before",
        "mousedown:before",
        "mousemove:before",
        "mousedblclick",
        "mousewheel",
        "mouseover",
        "mouseout",
        "drop",
        "dragover",
        "dragenter",
        "dragleave",
        'selected'
      ]
    };
  }
};
</script>
<style>
.el-tag {
    margin-right: 5px;
    margin-bottom: 5px;
}
</style>

